<template>
  <div>
    <div class="header">
      <Tally title='房源'></Tally>
        <el-button @click="add">添加</el-button>
    </div>
   
     <template>
  <el-table
    :data=" hosinglist"
    style="width: 100%;height:80%">
    <el-table-column
      label="楼盘名称"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.title }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="所属区域"
      width="280">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.address }}</el-tag>
          </div>
      </template>
    </el-table-column>
      <el-table-column
      label="价格"
      width="180">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.price}}</el-tag>
          </div>
      </template>
    </el-table-column>
      <el-table-column
      label="状态"
      width="180">
       <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.state ? '开盘':'未开盘'}}</el-tag>
          </div>
      </template>
    </el-table-column>
    
   <Mybutton
    @detel='detel'
    @handleEdit='handleEdit'
   ></Mybutton>
  </el-table>
    <el-pagination
          background
          layout="prev, pager, next"
          @current-change='currentPage'
          :total="length">
  </el-pagination>
     <template v-if="visble ? true : false">
      <Form @onSubmit='onSubmit' :title='title'></Form>
       </template>
</template>

  </div>
</template>

<script>
// import <组件名称> from '<组件路径>'
import Tally from '../../../components/Tally.vue'
import Mybutton from '../../../components/Mybutton.vue'
import {mapState,mapActions} from 'vuex'
// import Store from '../../../store'
import Form from '../../../components/Form.vue'
  export default {
    name: 'Address',
    //import引入的组件需要注入到对象中才能使用
    components: {
      Tally,
      Mybutton,
      Form
    },
    data() {
      //这里存放数据
      return {
        form:{},
        page:{
          pagesize:10,
          pageindex:0,
        
        },
        visble:false,
        title:'编辑'
       
      }
    },
    //监听属性 类似于data概念
    computed: {
      ...mapState(['hosinglist','length'])
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      ...mapActions([
      'SET_HOSING_LIST',
      'SET_DETELHOSING_LIST',
      'SET_HOUSE_LIST',
      'SET_ADD_LIST'
      ]),
     
      // 删除ID
      detel(id){
      this.SET_DETELHOSING_LIST(id)
      },
      // 分页
     currentPage(e){   
      this.SET_HOSING_LIST({
        // ...this.SET_HOSING_LIST(),
        ...this.page,
        pageindex:e-1
      })
      // this.$store.commit('GET_PAGE_INDEX',e)
      //  Store.state.page.pageindex=e
      },
      // 编辑
      handleEdit(redeact){
        // if(redeact.id){
          // console.log(redeact.id)
          // 编辑
        this.visble=true
        this.SET_HOUSE_LIST(redeact),
        this.title='编辑'
        // }else{
        //  this.SET_ADD_LIST(redeact)  
        // }
       
      },
      // 修改
       onSubmit(redeact){
     
        //  this.SET_HOUSE_LIST(redact)
         this.visble=false
         if(redeact.id){
          // console.log(redeact.id)
          // 编辑
        // this.visble=true
        this.SET_HOUSE_LIST(redeact)
        }else{
         this.SET_ADD_LIST(redeact)
        }
       },
      //  添加
      add(){
        this.visble=true,
        this.title='添加'
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.SET_HOSING_LIST() 
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
  .header{
    display: flex;
  }
</style>